<template>
  <div class="box">
    <input
      type="text"
      v-model="txt"
      class="ipt"
      @click="fun1"
      @blur="fun2"
      @keyup.38="jia"
      @keyup.40="jian"
      @keyup.enter="ss()"
    />
    <ul class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: index == flag }"
        @mouseover="show(index)"
      >
        {{ item.txt }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txt: "",
      flag: -1,
      list: [],
      list1: [
        { txt: "爱奇艺" },
        { txt: "adidas" },
        { txt: "阿里云" },
        { txt: "阿里巴巴" },
        { txt: "安居客" },
        { txt: "阿里巴巴批发网" },
        { txt: "爱思助手" },
        { txt: "安卓模拟器" },
        { txt: "阿里巴巴图标库" },
        { txt: "安能物流" }
      ],
      txt: ""
    };
  },
  mounted() {},
  methods: {
    fun1() {
      this.list = this.list1;
    },
    fun2() {
      this.list = [];
    },

    jia() {
      this.flag--;
      this.txt = this.list[this.flag].txt;
    },
    jian() {
      this.flag++;
      this.txt = this.list[this.flag].txt;
    },
    ss() {
      this.txt = this.list[this.flag].txt;
      let txt = this.txt;
      this.$router.push({ path: "tz", query: { txt } });
    },
    show(i) {
      this.flag = i;
      this.txt = this.list[this.flag].txt;
      // let txt = this.txt;
      // this.$router.push({ path: "tz", query: { txt } });
    },
    xxx() {
      console.log(1);
    }
  },
  components: {}
};
</script>

<style lang='scss'>
* {
  margin: 0;
  padding: 0;
}
.box {
  text-align: center;
  .ipt {
    width: 300px;
    height: 25px;
  }
  .list {
    border: 1px solid #cccccc;
    margin-left: 210px;
    width: 300px;
    list-style: none;
    line-height: 30px;
    .active {
      background: #cccccc;
    }
    li:hover {
      background: #cccccc;
    }
  }
}
</style>
